<template>
  <lay-layer title="AI大模型应用" type="drawer" area="68%" v-model="visible">
    <lay-tab v-model="current">
      <lay-tab-item title="DeepSeekR1(百度版)" id="2">
        <lay-card>
          <iframe
            id="myIframe"
            src="https://chat.baidu.com/search?isShowHello=1&pd=csaitab&setype=csaitab&extParamsJson=%7B%22enter_type%22%3A%22ai_explore_home%22%7D&usedModel=%7B%22modelName%22%3A%22DeepSeek-R1%22%7D"
            allowfullscreen
            :width="'100%'"
            :height="'700px'"
          ></iframe>
        </lay-card>
      </lay-tab-item>
      <lay-tab-item title="ChatGPT" id="3">
        <lay-card>
          <iframe
            src="https://gpt.91chat-ai.cn/chat"
            allowfullscreen
            :width="'100%'"
            :height="'700px'"
          ></iframe>
        </lay-card>
      </lay-tab-item>
    </lay-tab>
  </lay-layer>
</template>

<script lang="ts">
import {defineComponent, reactive, ref, watch} from 'vue';
import {chatGPT} from "../../api/module/gpt";

interface Message {
  id: number;
  user: string;
  text: string;
}

export default defineComponent({
    name: "RobotMan",
    setup() {
      const current = ref('2');
      const visible = ref(false);
      const messages:any = ref<Message[]>([]);
      const cache_messages = localStorage.getItem('robotMessage')
      if (cache_messages) {
          let cache_messages_value = JSON.parse(cache_messages)
          cache_messages_value.forEach((value:any) => {
              messages.value.push(value)
          });
      }
      else {
          const init_message: Message = {
              id: 1,
              user: '机器人',
              text: '你好，很高兴为你服务！'
          };
          messages.value.push(init_message);
      }

      const newMessage = ref('');
      const disabled = ref(false);
      const loadState = ref(false);

      const sendMessage = async () => {
        if (newMessage.value) {
          disabled.value = true;
          loadState.value = true;
          const chat_message: Message = {
            id: messages.value.length + 1,
            user: '我',
            text: newMessage.value,
          };
          messages.value.push(chat_message);

          const chatForm = reactive({content: newMessage.value});
          const tmp_message: Message = {
              id: messages.value.length + 1,
              user: '机器人',
              text: '让我想一想...',
          }
          messages.value.push(tmp_message);

          let {result, status, message} = await chatGPT(chatForm);
          if(status == 'success'){
              const answer_message: Message = {
                  id: messages.value.length + 1,
                  user: '机器人',
                  text: result,
              };
              messages.value.pop()
              messages.value.push(answer_message);
          }
          localStorage.setItem('robotMessage', JSON.stringify(messages.value));
          newMessage.value = '';
          disabled.value = false;
          loadState.value = false;
        }
      };

      return {
        current,
        visible,
        messages,
        newMessage,
        disabled,
        loadState,
        sendMessage,
      };
  },
});
</script>

<style scoped>
div.chat-container-header {
  display: none;
}
</style>